<template>
  <div class="user">
    <div class="head">
      <div class="headimage">
        <img v-if="setting.cloud" :src="setting.cloud.url + avatar" />
      </div>

      <div class="text">
        <div class="username">{{ user.nickname ?? "请先登录" }}</div>
        <div class="authstate" @click="toPage('auth')">{{ authMess }}</div>
      </div>
      <div class="set" @click="toPage('set')">设置</div>
    </div>

    <div class="signout">
      <div>
        链地址:
        <span style="margin-left: 0.0481rem; font-weight: bold">{{
          wallet_addr
        }}</span>
      </div>
      <img
        v-show="wallet_addr != '链地址生成中'"
        src="../assets/image/goods/copy.png"
        @click="copy(user.wallet_addr)"
      />
    </div>

    <div class="barnumber">
      <div class="item" @click="$router.push({name: 'collection', params: {type:'one'}})">
        <div>{{user.user_goods_count??0}}</div>
        <div class="text">藏品</div>
      </div>
      <div class="item" @click="$router.push({name: 'collection', params: {type:'two'}})">
        <div>{{user.user_message_count??0}}</div>
        <div class="text">消息</div>
      </div>
      <div class="item" @click="$router.push({name: 'collection', params: {type:'three'}})">
        <div>{{user.sale_num??0}}</div>
        <div class="text">已卖出</div>
      </div>
      <div class="item" @click="toPage('invit')">
        <div>{{user.invite_user_count??0}}</div>
        <div class="text">邀请</div>
      </div>
    </div>

    <div class="bar">
      <div class="orderlist" @click="toPage('orderlist')">
        <img src="../assets/image/my/Orderlists.png" />
        <div class="text">订单列表</div>
      </div>
      <div class="record" @click="toPage('givelist')">
        <img src="../assets/image/my/historys.png" />
        <div class="text">转赠记录</div>
      </div>
      <div class="record" @click="toPage('wallet')">
        <img src="../assets/image/my/wallers.png" />
        <div class="text">钱包</div>
      </div>
      <div class="record" @click="toPage('share')">
        <img src="../assets/image/my/synthesis.png" />
        <div class="text">合成</div>
      </div>
    </div>

    <div class="model">
      <div class="safe public">
        <div class="text">提现账户</div>
        <div class="more">
          <img src="../assets/image/my/mores.png" />
        </div>
      </div>
      <div class="safe public" @click="toPage('account_menu')">
        <div class="text">账户与安全</div>
        <div class="more">
          <img src="../assets/image/my/mores.png"/>
        </div>
      </div>
      <div class="safe public">
        <div class="text">积分商城</div>
        <div class="more">
          <img src="../assets/image/my/mores.png"/>
        </div>
      </div>
      <div class="safe public" @click="toPage('loginInfo')">
        <div class="text">登录信息</div>
        <div class="more">
          <img src="../assets/image/my/mores.png"/>
        </div>
      </div>
      <div class="safe public" @click="toPage('auth')">
        <div class="text">实名认证</div>
        <div class="more">
          <img src="../assets/image/my/mores.png"/>
        </div>
      </div>
      <div class="safe public" @click="overlayShow">
        <div class="text">联系我们</div>
        <div class="more">
          <img src="../assets/image/my/mores.png"/>
        </div>
      </div>
      
      <!-- 弹出二维码的遮罩层 -->
      <van-overlay @click="overshow=false" :show="overshow">
        <div class="wrapper">
          <div class="block">
            <img src="../assets/image/my/qq.png"/>
            <div class="text">添加官方QQ群</div>
          </div>
        </div>
      </van-overlay>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import commonStore from "../store/common";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import useClipboard from "vue-clipboard3";
import fun from "../assets/fun";

const common = commonStore();

const token = computed(() => common.token);
const user = computed(() => common.userInfo);
const setting = computed(() => common.setting)
const router = useRouter();
if (token.value) {
  common.getUserInfo();
}

const authMess = computed(() => {
  if (user.value.idcard) {
    return "已实名";
  } else {
    return "未实名";
  }
});

const wallet_addr = computed(() => {
  if (user.value?.wallet_addr) {
    return fun.addr(user.value.wallet_addr, "user");
  } else {
    return "生成中";
  }
});

const avatar = computed(() => {
  if (user.value?.avatar) {
    //console.log('setting:', setting.value)
    return user.value.avatar;
  }
  return setting.value.site_logo
});

const toPage = (flag) => {
  router.push({name: flag})
};

// 复制
const { toClipboard } = useClipboard();
const copy = async (value) => {
  try {
    await toClipboard(value);
    Toast.success("复制成功");
  } catch (e) {
    Toast.fail("复制失败");
  }
};

// 遮罩层的隐藏与显示
let overshow = ref(false)
const overlayShow = () => { 
  overshow.value = true
}
</script>

<style lang="scss" scoped>
.user {
  width: 7.5077rem;
  height: 16.2308rem;
  background-color: #fafafa;
}
.head {
  padding: 0.3846rem;
  color: black;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .headimage {
    width: 1.1538rem;
    height: 1.1538rem;
    border-radius: 50%;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .text {
    width: 3.2692rem;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    margin-left: -.9rem;
    margin-top: -0.4rem;

    .username {
      font-size: 0.3365rem;
      overflow: hidden;
      width: 1.7308rem;
    }

    .authstate {
      display: flex;
      align-items: center;
      height: 0.38rem;
      justify-content: center;
      background: black;
      border-radius: 0.0962rem;
      padding: 0 0.15rem;
      font-size: 0.0385rem;
      color: white;
      margin-left: 0.1923rem;
      margin-top: -0.08rem;
    }
  }

  .set {
    padding: 0.1538rem;
    width: 0.7692rem;
    text-align: center;
    border: #707070 solid 0.0192rem;
    color: #707070;
    border-radius: 0.1923rem;
    font-size: 0.2308rem;
    margin-top: 0.0962rem;
  }
}

.signout {
  display: flex;
  align-items: center;
  margin-top: -0.8654rem;
  margin-left: 1.7308rem;

  img {
    width: 0.2885rem;
    height: 0.2885rem;
  }

  div {
    font-size: 0.25rem;
    white-space: nowrap;
    width: 2.4038rem;
    color: #665d78;
  }
}

.barnumber {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-top: 0.67rem;

  div {
    font-size: 0.4rem;
    font-weight: bold;
  }

  .text {
    font-weight: normal;
    font-size: 0.2rem;
  }

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .record {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
  }
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: .2885rem;
  color: black;
  font-size: .1923rem;
  background: #fff;
  width: 6.4423rem;
  margin-left: .2404rem;
  margin-top: .2885rem;

  .record {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;

    img {
      width: .5385rem;
      height: .5385rem;
      margin-bottom: .1154rem;
    }
  }

  .orderlist {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;

    img {
      width: .5385rem;
      height: .5385rem;
      margin-bottom: .1154rem;
    }
  }
}

.model {
	width: 6.9231rem;
	margin-left: .2885rem;
	margin-top: .2885rem;
	background: #fff;
	border-radius: .3846rem;

	.public {
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: .3365rem;

    .text { 
      font-size: .2692rem;
    }
	}

	img {
		width: .2885rem;
		height: .2885rem;
	}
}

.wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.block {
	padding: .3846rem;
	background-color: #fff;
	img { 
		width: 3.8462rem;
		height: 3.8462rem;
	}

	.text { 
		text-align: center;
		padding-top: .1923rem;
		letter-spacing: .0577rem;
	}
}
</style>